<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>农资商城销售系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" th:href="@{/admin/css/font.css}">
    <link rel="stylesheet" th:href="@{/admin/css/layui.css}">
    <link rel="stylesheet" th:href="@{/admin/css/xadmin.css}">
    <script type="text/javascript" th:src="@{/admin/js/jquery-3.5.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/admin/lib/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/global.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/layui.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/xadmin.js}"></script>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">订单管理</a>
            <a>
              <cite>订单列表</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="用户名称" name="username"
                                   id="username">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="省份" name="shprovince"
                                   id="shprovince">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <select name="state" id="state" lay-search="">
                                <option value="0">请选择状态</option>
                                <option value="1">未付款</option>
                                <option value="2">待发货</option>
                                <option value="3">已发货</option>
                                <option value="4">已签收</option>
                                <option value="5">交易完成</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table id="test" class="layui-hide" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 行内 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-icon" lay-event="selectInfo"><i class="layui-icon">&#xe615;</i>详情</a>
    <a class="layui-btn layui-btn-xs layui-icon" lay-event="update"><i class="layui-icon">&#xe642;</i>发货</a>
</script>

</body>
<script>

    layui.use(['laydate', 'form', 'table'], function () {
        var laydate = layui.laydate;
        var form = layui.form;
        var table = layui.table;

        //初始化表格数据
        table.render({
            elem: '#test',
            url: prefix + '/order/selectAll',
            method: "get",
            title: '订单列表',
            page: true,
            id: 'liebiao',
            parseData: function (res) {
                return {
                    "code": 0,
                    "msg": res.msg,
                    "count": res.data.count,
                    "data": res.data.data
                }
            },
            cols: [
                [
                    {
                        field: 'orderid',
                        title: '订单号',
                        sort: true,
                        align: 'center',
                        width: 170,
                    },
                    {
                        field: 'username',
                        title: '用户名称',
                        align: 'center',
                    },
                    {
                        field: 'time',
                        title: '创建时间',
                        align: 'center',
                        templet: function (d) {
                            if (d.time) {
                                return d.time.substring(0, 10);
                            }
                        }
                    }, {
                    field: 'sumprice',
                    title: '总价',
                    align: 'center',
                }, {
                    field: 'shname',
                    title: '收货人姓名',
                    align: 'center'
                }, {
                    field: 'shphone',
                    title: '收货人手机号',
                    align: 'center',
                }, {
                    field: 'shjaddress',
                    title: '收货人地址',
                    align: 'center',
                    templet: function (d) {
                        if (d.shprovince){
                            return d.shprovince + ' ' + d.shcity + ' ' + d.district + ' ' + d.shstreet + '' + d.shjaddress;
                        }else{
                            return '';
                        }
                    }
                }, {
                    field: 'state',
                    title: '状态',
                    align: 'center',
                    templet: function (d) {
                        if (d.state === 1) {
                            return '<span class="layui-badge layui-bg-red">未付款</span>';
                        } else if (d.state === 2) {
                            return '<span class="layui-badge layui-bg-green">待发货</span>';
                        } else if (d.state === 3) {
                            return '<span class="layui-badge layui-bg-orange">已发货</span>';
                        } else if (d.state === 4) {
                            return '<span class="layui-badge layui-bg-blue">已签收</span>';
                        } else if (d.state === 5) {
                            return '<span class="layui-badge layui-bg-green">交易完成</span>';
                        }
                    }
                }, {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 180,
                    align: 'center'
                }
                ]
            ]
        });


        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'selectInfo') {
                layer.open({
                    title: '您正在查看订单号为：' + obj.data.orderid + '的订单信息',
                    type: 2,
                    shade: 0.3,
                    shadeClose: true,
                    skin: 'layui-layer-molv',
                    anim: 5,
                    btnAlign: 'c',
                    closeBtn: 1,
                    area: [($(window).width() - 50) + "px", ($(window).height() - 50) + "px"],
                    content: prefix + '/orderDetailsList',
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        body.find("#goodsid").val(obj.data.id);
                    },
                    end: function () {
                        table.reload('liebiao');
                    }
                });
            } else if (obj.event === 'update') {
                let state = obj.data.state;
                if (state !== 2) {
                    layer.msg('订单状态还不是待发货状态，无法进行操作');
                    return false;
                }

                layer.confirm('确定要发货吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    $.post(prefix + '/order/update', {id: data.id, state: 3}, function (res) {
                        if (res.code === 200) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 2000
                            }, function () {
                                table.reload('liebiao');
                            });
                        } else {
                            layer.msg(res.msg, {
                                icon: 5,
                                time: 2000
                            });
                        }
                    })
                })

            }
        });

        // 搜索提交
        form.on('submit(sreach)', function (data) {
            let field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reload('liebiao', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });
            return false; // 阻止默认 form 跳转
        });


    });


</script>
</html>